<!doctype html>  
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	
	<title>Blandes - Multipurpose HTML5 Template</title>
	
	<meta name="description" content="">
	<meta name="author" content="Bradweb">
	<meta name="copyright" content="Bradweb">
	<meta name="generator" content="Documenter v2.0 http://rxa.li/documenter">
	<meta name="date" content="2013-11-05T00:00:00+01:00">
	
	<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
	<link rel="stylesheet" href="assets/js/google-code-prettify/prettify.css" media="screen">
	<script src="assets/js/google-code-prettify/prettify.js"></script>

	
	
	<script src="assets/js/jquery.js"></script>
	
	<script src="assets/js/jquery.scrollTo.js"></script>
	<script src="assets/js/jquery.easing.js"></script>
	
	<script>document.createElement('section');var duration='500',easing='swing';</script>
	<script src="assets/js/script.js"></script>
	
	<style>
		html{background-color:#FFFFFF;color:#383838;}
		::-moz-selection{background:#444444;color:#DDDDDD;}
		::selection{background:#444444;color:#DDDDDD;}
		#documenter_sidebar #documenter_logo{background-image:url(assets/images/image_1.png);}
		a{color:#0000FF;}
		.btn {
			border-radius:3px;
		}
		.btn-primary {
			  background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
			  background-image: -ms-linear-gradient(top, #0088CC, #0044CC);
			  background-image: -webkit-gradient(linear, 0 0, 0 0088CC%, from(#DDDDDD), to(#0044CC));
			  background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
			  background-image: -o-linear-gradient(top, #0088CC, #0044CC);
			  background-image: linear-gradient(top, #0088CC, #0044CC);
			  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088CC', endColorstr='#0044CC', GradientType=0);
			  border-color: #0044CC #0044CC #bfbfbf;
			  color:#FFFFFF;
		}
		.btn-primary:hover,
		.btn-primary:active,
		.btn-primary.active,
		.btn-primary.disabled,
		.btn-primary[disabled] {
		  border-color: #0088CC #0088CC #bfbfbf;
		  background-color: #0044CC;
		}
		hr{border-top:1px solid #EBEBEB;border-bottom:1px solid #FFFFFF;}
		#documenter_sidebar, #documenter_sidebar ul a{background-color:#DDDDDD;color:#222222;}
		#documenter_sidebar ul a{-webkit-text-shadow:1px 1px 0px #EEEEEE;-moz-text-shadow:1px 1px 0px #EEEEEE;text-shadow:1px 1px 0px #EEEEEE;}
		#documenter_sidebar ul{border-top:1px solid #AAAAAA;}
		#documenter_sidebar ul a{border-top:1px solid #EEEEEE;border-bottom:1px solid #AAAAAA;color:#444444;}
		#documenter_sidebar ul a:hover{background:#444444;color:#DDDDDD;border-top:1px solid #444444;}
		#documenter_sidebar ul a.current{background:#444444;color:#DDDDDD;border-top:1px solid #444444;}
		#documenter_copyright{display:block !important;visibility:visible !important;}
	</style>
	
</head>
<body class="documenter-project-blandes">
	<div id="documenter_sidebar">
		<a href="#documenter_cover" id="documenter_logo"></a>
		<ul id="documenter_nav">
			<li><a class="current" href="#documenter_cover">Start</a></li>
			<li><a href="#tips" title="Tips">Tips</a></li>	
			<li><a href="#files_stucture" title="Files Stucture">Files Stucture</a></li>
			<li><a href="#how_to_install_required_fonts" title="How to Install Required Fonts">How to Install Required Fonts</a></li>
			<li><a href="#html_stucture" title="Html Stucture">HTML Stucture</a></li>
			<li><a href="#css_stucture" title="Css Stucture">Css Stucture</a></li>
			<li><a href="#javascript" title="Javascript ">Javascript </a></li>
			<li><a href="#icons" title="Icons">Icons</a></li>
			<li><a href="#social_icons" title="Social Icons">Social Icons</a></li>
			<li><a href="#sliders" title="Sliders">Sliders</a></li>
			<li><a href="#responsive" title="Responsive">Responsive</a></li>
			<li><a href="#source_and_credits" title="source And Credits">source And Credits</a></li>

		</ul>
		<div id="documenter_copyright">Copyright Bradweb 2013<br>
		made with the <a href="http://rxa.li/documenter">Documenter v2.0</a> 
		</div>
	</div>
	<div id="documenter_content">
	<section id="documenter_cover">
	<h1>Blandes</h1>
	<h2>Multipurpose HTML5 Template</h2>
	<div id="documenter_buttons">
		
	</div>
	<hr>
	<ul>
	<li>Created: 11/03/2013</li>
	<li>Latest update: 11/05/2013</li>
	<li>By: Bradweb</li>
	<li><a href="http://www.themeforest.net/user/bradweb">www.themeforest.net/user/bradweb</a></li>
	
	</ul>
	<p>If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form </p>
	</section>
	
    
    	<section id="tips">
	<div class="page-header"><h3>Tips</h3><hr class="notop"></div>
    <p>
    <div class="alert alert-info">
	Museo_sans_500  font  is required for correctly displaying  headings and some other typography . Please following the instruction below  how to install required fonts</div></p>
    <p>
<div class="alert alert-info">Images used in the preview are only used for demonstration purpose and are not included with the main files</div>
    </p>
    
  
    </section>
	<section id="files_stucture">
	<div class="page-header"><h3>Files Stucture</h3><hr class="notop"></div>
<pre class="prettyprint lang-html linenums">
blandes
  - Css ( Default css Files Folder)
     -- layout.css ( Default Postion and layout )
     -- main.css (Includes main require css styles ( Typography , Header , Footter , Widgets , Blog and Single Page Styles))
     -- Shortcodes.css ( Main Element Styles such as accordions ,tabs , portfolios , buttons etc)
     -- icons.css ( All the main Entypo icons , Social icons , lineicons)
     -- responsive.css ( Included all the styles for different devices)
     -- flexslider.css
     -- settings.css ( Revolution Slider Main file)
     -- captions.css ( Revolution Slider Caption Styles)
  - js ( Default javascript files folder)
    -- jquery.js
    -- modernizr.js
    -- jquery.themepunch.revolution.min.js
    -- caroufred.js
    -- isotope.js
    -- flexslider.js
    -- plugins.js ( Extra Jquery plugins Cycle 2 , Equal Height , Imageloader , superfish , counto , swipe , hoverintent and tabset)
    -- main.js
  - images (All images)
  - font ( All Required Fonts )
  - revslider ( Revolution Slider Files )
  master ( All html Files included in main directory)</pre>
</section>
<section id="how_to_install_required_fonts">
	<div class="page-header"><h3>How to Install Required Fonts</h3><hr class="notop"></div>
<p>
	<span style="font-size: 12px;">We have &nbsp;used the open sans ( Free Font from Google) as the primary font .You do&#39;t need install it manually We have already included it with the default files .</span></p>
<p>
	For the Heading and sliders title we have used the &nbsp;museo_sans_500 ( 100% free font for commerical usage). You can download it form the following link</p>
<p>
	<a href="http://www.fontspring.com/fonts/exljbris/museo-sans">http://www.fontspring.com/fonts/exljbris/museo-sans</a></p>
<p>
	You may need to sign up for downloading the font .</p>
<p>
	Copy the Downloaded font as <b>MuseoSans_500-webfont&nbsp;</b>(MuseoSans_500-webfont.eot,MuseoSans_500-webfont.svg,MuseoSans_500-webfont.ttf,MuseoSans_500-webfont.woff) into the font folder inside the main directory.</p>
</section>
<section id="html_stucture">
	<div class="page-header"><h3>HTML Stucture</h3><hr class="notop"></div>
<p>
	<span style="font-size: 12px;">The default grid system utilizes </span><strong style="font-size: 12px;">12 columns&nbsp;</strong><span style="font-size: 12px; color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;">, making for a&nbsp;</span><span style="font-size: 12px; margin: 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(56, 56, 56); line-height: 18px;">1140px&nbsp;</span><span style="font-size: 12px; color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;">wide depending on your viewport. Below 800 px viewports, the columns become fluid and stack vertically. But the four , five and &nbsp;six columns will &nbsp;converted into two columns.</span></p>
<p>
	<span style="color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;">Create a .row and add the appropriate number of .span* columns.</span></p>
<pre class="prettyprint lang-html linenums">
<span style="color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;">&lt;div class=&quot;row-fluid&quot;&gt;
        Level 1 
        &lt;div class=&quot;row-fluid&quot;&gt;
               &lt;div class=&quot;span6&quot;&gt;Level 2 &lt;/div&gt;
               &lt;div class=&quot;span6&quot;&gt;Level 2 &lt;/div&gt;
         &lt;/div&gt;
&lt;/div&gt;
</span></pre>
</section>
<section id="css_stucture">
	<div class="page-header"><h3>Css Stucture</h3><hr class="notop"></div>
<pre class="prettyprint lang-html linenums">
  Css ( Default css Files Folder)
     -- layout.css ( Display and layout )
     -- main.css (Includes main require css styles ( Typography , Header , Footter , Widgets , Blog and Single Page Styles))
     -- Shortcodes.css ( Main Element Styles such as accordions ,tabs , portfolios , buttons etc)
     -- icons.css ( All the main Entypo icons , Social icons , lineicons)
     -- responsive.css ( Included all the styles for different devices)
     -- flexslider.css
     -- settings.css ( Revolution Slider Main file)
     -- captions.css ( Revolution Slider Caption Styles)</pre>
<p>&nbsp;
	</p>
</section>
<section id="javascript">
	<div class="page-header"><h3>Javascript </h3><hr class="notop"></div>
<p>
	Blandes is completely built upon the Jquery .&nbsp;</p>
<p>
	We have used the following jquery Plugins</p>
<ul>
	<li>
		isotope.js - For Re-layout Grid and Masonry Portfolios</li>
	<li>
		flexslider.js - Primary slider</li>
	<li>
		Cycle 2 - For full width carousels .</li>
	<li>
		carousefred.js ( For Posts and Portfolio Carousels)</li>
	<li>
		plugins.js ( Imageloader , equal heights, superfish , tabset , tooltips , counto , piecharts , waypoints etc)</li>
</ul>
<p>
	Take a look at the main.js File to know how all this work.</p>
<p>&nbsp;
	</p>
<p>&nbsp;
	</p>
</section>
<section id="icons">
	<div class="page-header"><h3>Icons</h3><hr class="notop"></div>
<p>
	Blandes have used &nbsp;entypo and lineicons &nbsp;grouped into one css file (icons.css).</p>
<pre class="prettyprint lang-html linenums">
To use the entypo icons in your html.
   &lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;
   &lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt;

To use the custom Blandes Icons in Your Html
   &lt;i class=&quot;icon-blandes-search&quot;&gt;&lt;/i&gt;</pre>
<p>
	Check out the icons.css file for more reference.</p>
</section>
<section id="social_icons">
	<div class="page-header"><h3>Social Icons</h3><hr class="notop"></div>
<p>
	Blandes have Inlcuded almost all Social network icons such as Twitter , LinkedIn , Dribbble etc.</p>
<pre class="prettyprint lang-html linenums">
To use the Social icons in your html.
   &lt;i class=&quot;icon-twitter&quot;&gt;&lt;/i&gt;
   &lt;i class=&quot;icon-linkedin&quot;&gt;&lt;/i&gt;
</pre>
<p>
	Check out the icons.css file for more reference.</p>
</section>
<section id="sliders">
	<div class="page-header"><h3>Sliders</h3><hr class="notop"></div>
<h4 id="sliders_homepage_revolution_slider">Homepage Slider</h4>
<p>
	We have inclued the Revolution Slider with Blandes offering you to show images , videos , captions paired with simple and fancy modern 3d Transitions.</p>
<p>
	To know more about Revolution Slider Go To ;&nbsp;<a href="http://themes.themepunch.com/?theme=revolution_jq" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(0, 0, 255); cursor: pointer; line-height: 18px;">http://themes.themepunch.com/?theme=revolution_jq</a></p>
<h4 id="sliders_content_sliders">Content sliders</h4>
<ul>
	<li>
		<strong>flexslider - </strong>Used on &nbsp;various places to create easy slideshow of your images .</li>
	<li>
		<strong>caroufred</strong> - Used for Post and Portfolios Carousel</li>
	<li>
		<strong>Cycle</strong> - Used for Full width Carousel</li>
</ul>
<p>&nbsp;
	</p>
<p>&nbsp;
	</p>
</section>
<section id="responsive">
	<div class="page-header"><h3>Responsive</h3><hr class="notop"></div>
<p>
	Blandes includes a unique mobile experience that matches the overall style of your website, so your content will look great on every device, every time</p>
<p>
	<strong>Default Layout</strong> :1140px<br>
	<strong>Gutter Width</strong> : 40px</p>
<p>
	<strong>Landscape Tablets Layout</strong> :1024px<br>
	<strong>Gutter Width</strong> : 40px</p>

<p>
	<strong>Portrait Tablets and landscape phones </strong> : 800px<br>
	<strong>Gutter Width</strong> : 20px</p>

<p>
	<strong>Ipad </strong> : 768px to 979px<br>
	<strong>Gutter Width</strong> : 20px</p>
</section>
<section id="source_and_credits">
	<div class="page-header"><h3>source And Credits</h3><hr class="notop"></div>
<div class="alert alert-info">
	Images used in preview are only for demonstration purposes and are not inlcluded in Main file</div>
<p>
	Images :&nbsp;<a href="http://depositphotos.com/">http://depositphotos.com/</a></p>
<p>
	Google Fonts&nbsp;<a href="http://www.google.com/webfonts">http://www.google.com/webfonts</a></p>
<p>
	Icons :&nbsp;<a href="http://icomoon.io/">http://icomoon.io/</a></p>
<h5>
	Scripts</h5>
<p>
	Jquery&nbsp;<a href="http://www.jquery.com/">http://www.jquery.com/</a></p>
<p>
	Revolution slider&nbsp;<a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848">http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848</a></p>
<p>
	Modernizr&nbsp;<a href="http://modernizr.com/">http://modernizr.com/</a></p>
<p>
	FlexSlider&nbsp;<a href="http://www.woothemes.com/flexslider/">http://www.woothemes.com/flexslider/</a></p>
<p>
	Jquery Easing&nbsp;<a href="http://gsgd.co.uk/sandbox/jquery/easing/">http://gsgd.co.uk/sandbox/jquery/easing/</a></p>
<p>
	Caroufredsel&nbsp;<a href="http://caroufredsel.dev7studios.com/">http://caroufredsel.dev7studios.com/</a></p>
<p>
	Cycle 2&nbsp;<a href="http://jquery.malsup.com/cycle2/">http://jquery.malsup.com/cycle2/</a></p>
<p>&nbsp;
	</p>
</section>

	</div>
</body>
</html>